<template>
    <div class="app-container">
        <!-- 简答题的创建和编辑页 -->
        <el-form :model="formData" ref="formData" label-width="100px" v-loading="formLoading" :rules="rules" >
            <el-form-item label="选择科目："  prop="subjectId" v-if="!isEdit" >
                <el-select v-model="formData.subjectId" placeholder="请选择科目" remote reserve-keyword filterable
                :remote-method="getSubjectName">
                <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="题目名称：" prop="questionName" required>
                <!-- <el-input v-model="formData.questionName" placeholder="请输入题目"></el-input> -->
                <Tinymce :content.sync="formData.questionName" :height="300"></Tinymce>
            </el-form-item>
            <el-form-item label="答案：" prop="correctAnswer" required>
                <!-- <el-input type="textarea" :autosize="true" v-model="formData.correctAnswer" placeholder="请输入解析"
                resize="none"></el-input> -->
                <Tinymce :content.sync="formData.correctAnswer" :height="300"></Tinymce>
            </el-form-item>
            <el-form-item label="分数：" prop="questionScore">
                <el-input-number v-model="formData.questionScore" :min="1" :precision="2" :step="0.5"></el-input-number>
            </el-form-item>
            <el-form-item label="解析：" prop="questionDesc">
                <!-- <el-input type="textarea" :autosize="true" v-model="formData.questionDesc" placeholder="请输入解析"
                resize="none"></el-input> -->
                <Tinymce :content.sync="formData.questionDesc" :height="300"></Tinymce>
            </el-form-item>
            <el-form-item label="难度：" prop="difficulty">
                <div style="margin-top: 10px;">
                    <el-rate 
                    v-model="formData.difficulty"
                    show-text :texts="showText">
                </el-rate>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
                <el-button @click="close" >关闭</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {getSubjectName} from '@/api/subject/subject'
import {getQuestionById,editOrAdd} from '@/api/question/question'

import Tinymce from '@/components/richText/Tinymce.vue'
export default {
    name:'WrittenQuestion',
    components:{
        Tinymce
    },
    data(){
        return {
            formData:{
                id:0,
                questionName:'',
                questionType:4,
                questionScore:null,
                subjectId:null,
                difficulty:1,
                correctAnswer:'',
                questionDesc:'',
            },
            formLoading:false,
            options:[],
            showText:['简单','基础','中等','高难','附加题'],
            //判断是否为编辑
            isEdit:false,
            // 校验的规则
            rules:{
                subjectId:{required: true,message:'请选择科目',trigger: 'blur' },
                questionName:{required: true,message:'请输入题目名',trigger: 'blur' }
            }
        }
    },
    mounted(){
        // 向路由获取信息
        let id = this.$route.query.id;
        if(id && parseInt(id) != 0){
            this.isEdit = true;
            getQuestionById(id).then(resp=>{
                this.formData = resp.data;
                console.log(resp.data);
            })
        }
    },
    methods:{
        // 提交表单
        submitForm(){
            this.$refs.formData.validate(valid=>{
                if(valid){
                    editOrAdd(this.formData).then(resp=>{
                        if(resp.code == 200){
                            this.$message.success(resp.message)
                            this.$router.push('/question/index')

                        }else{
                            this.$message.error(resp.message);
                        }
                    })
                }
            })
        },
        // 重置表单
        resetForm(){
                this.formData.questionName ='',
                this.formData.questionType=4,
                this.formData.questionScore=null,
                this.formData.subjectId=null,
                this.formData.difficulty=1,
                this.formData.correctAnswer='',
                this.formData.questionDesc=''
        },
        close(){
            this.$router.push('/question/index')
        },
        getSubjectName(val){
            if(val.trim() != ''){
                getSubjectName(val).then(resp=>{
                    console.log("根据学科名查询===》",resp.data);
                    this.options = resp.data;
                })
            }
        }
    }
}
</script>

<style>

</style>